<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <title>基金详情-1</title>
  <link rel="stylesheet" href="../css/fund.css" />
  <style>
    .vertical-icon {
      background-image: url(../image/vertical.png);
      background-size: contain;
      width: 5.867vw;
      height: 5.867vw;
      position: absolute;
      top: 16.2vw;
      right: 4vw;
    }
  </style>
  <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
</head>

<body>
  <div class="status-container">
    <p style="line-height: 1;margin: 2.4vw 0 3.2vw;">
      <span style="font-size: 4.8vw;">xx 行业基金名称</span>
      <span style="font-size: 3.066666666666667vw;font-weight: 300;padding-left: 1.7333333333333334vw;">001938</span>
    </p>
    <div class="flex" style="margin-bottom: 1.0666666666666667vw">
      <div class="auxiliary-font">最近净值(04-18)</div>
      <div class="auxiliary-font">日涨幅</div>
    </div>
    <div class="flex" style="margin-bottom: 4vw">
      <div class="main-font">1.2380</div>
      <div class="main-font">2.98%</div>
    </div>
    <div class="cut-off-container flex">
      <div class="auxiliary-font" style="line-height: 9.6vw;">
        <span class="border-font">高风险</span>
        <span class="border-font">混合型</span>
      </div>
      <div class="auxiliary-font right-part" style="line-height: 9.6vw;">
        晨星评级：<img src="https://gw.alipayobjects.com/zos/rmsportal/OEWzqwWkJCXaEVIbxowA.png" style="width:50%;">
      </div>
    </div>
    <div class="diagnose">
      <a href="./diagnose.html" target="_blank">基金诊断</a>
    </div>
  </div>

  <!-- 时间切换 按钮 -->
  <div class="tab" id="sceneSwitch" style="box-shadow: none;">
    <button class="item-button button-50 active" id="trend-no-deal">业绩走势</button>
    <button class="item-button button-50" id="evaluation-over">净值估算</button>
  </div>
  <div class="chart-container">
    <a class="landscape" target="_blank" href="./trend-no-deal-landscape.html?__webview_options__=enableWK%3DYES%26fullscreen%3DYES%26landscape%3Dlandscape%26canPullDown%3DNO%26landscapeOrientation%3Dleft">
      <div class="vertical-icon"></div>
    </a>
    <iframe class="chart-iframe" id="chart" src="./trend-no-deal.html" frameborder="0"></iframe>
  </div>

  <div class="list-container">
    <a href="./allocation.html" target="_blank">
      <div class="flex-list">
        <div>持仓占比</div>
        <div class="redirect-arrow">
          <img src="../image/arrow.png" alt="" />
        </div>
      </div>
    </a>
    <a href="./rank.html" target="_blank">
      <div class="flex-list">
        <div>基金同类排名</div>
        <div class="redirect-arrow">
          <img src="../image/arrow.png" alt="" />
        </div>
      </div>
    </a>
    <div class="flex-list">
      <div>基金经理</div>
      <div style="text-align: right;">张三、李四</div>
      <div class="redirect-arrow">
        <img src="../image/arrow.png" alt="" />
      </div>
    </div>
  </div>

  <div class="tab" style="box-shadow: none;">
    <button class="item-button button-50 active">历史业绩</button>
    <button class="item-button button-50">历史净值</button>
  </div>
  <table class="table" style="margin-bottom: 18vw;">
    <thead>
      <tr>
        <th scope="col">时间区间</th>
        <th scope="col">涨跌幅</th>
        <th scope="col">同类排名</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>近一周</td>
        <td class="green">-0.96%</td>
        <td>1383/3078</td>
      </tr>
      <tr>
        <td>近一月</td>
        <td class="green">-4.82%</td>
        <td>1808/3039</td>
      </tr>
      <tr>
        <td>近三月</td>
        <td class="green">-7.45%</td>
        <td>1322/2930</td>
      </tr>
      <tr>
        <td>近六月</td>
        <td class="green">-2.45%</td>
        <td>1033/2784</td>
      </tr>
      <tr>
        <td colspan="3" style="text-align: center;color: #1890FF">查看更多</td>
      </tr>
    </tbody>
  </table>

  <div class="footer">
    <div class="bar">开放买入 开放卖出（买入费率 <s>1.06%</s> 0.00%）</div>
    <div class="tab button-group">
      <button class="item-button" style="width: 14.67vw;height: 13.33333vw;border-right: 1px solid #E8E8E8;font-size: 2.67vw">
        <img src="../image/png1.png" style="width:4.8vw;height: 4.533vw;;display: block;margin: auto;margin-bottom: 0.8vw;">
        讨论区
      </button>
      <button class="item-button" style="width: 14.67vw;height: 13.33333vw;border-right: 1px solid #E8E8E8;font-size: 2.67vw">
        <img src="../image/png2.png" style="width:4.8vw;display: block;margin: auto;margin-bottom: 0.8vw;">
        财富号
      </button>
      <button class="item-button" style="width: 14.67vw;height: 13.33333vw;border-right: 1px solid #E8E8E8;font-size: 2.67vw">
        <img src="../image/png3.png" style="width:4.8vw;display: block;margin: auto;margin-bottom: 0.8vw;">

        加自选
      </button>
      <button class="item-button" style="width: 28vw;height: 13.33333vw;background: #fff;color:#1890ff;font-size: 4.55555333vw">定投</button>
      <button class="item-button" style="width: 28vw;height: 13.33333vw;background: #2772FF;color:#fff;font-size: 4.55555333vw">买入</button>
    </div>
  </div>


  <script>
    // 切换按钮，更新数据
    var iFrame = $('#chart');
    $('#sceneSwitch .item-button').click(function(e) {
      var target = $(e.target);
      var id = target.attr('id');
      if (target.hasClass('active')) {
        return;
      }

      var currentActive = $('#sceneSwitch').find('button.active');
      currentActive.removeClass('active');
      target.addClass('active');

      if (id !== 'evaluation-over') {
        $('.landscape').attr('href', './' + id + '-landscape.html?__webview_options__=enableWK%3DYES%26fullscreen%3DYES%26landscape%3Dlandscape%26canPullDown%3DNO%26landscapeOrientation%3Dleft');
        $('.landscape').removeClass('hidden');
      } else {
        $('.landscape').addClass('hidden');
      }

      iFrame.attr('src', './' + id + '.html')
    });

  </script>
</body>

</html>
